<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="layui/css/layui.css">
    <title>Title</title>
</head>
<body>
<form class="layui-form" >
    <div class="layui-form-item">
        <label class="layui-form-label" >部门名称</label>
        <div class="layui-input-inline">
            <input id="name1" name="name"   placeholder="请输入新部门名称" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">所在城市</label>
        <div class="layui-input-inline">
            <input id="city1" name="city"    placeholder="请输入新部门所在城市" autocomplete="off" class="layui-input">
        </div>
        <button type="submit"  lay-submit lay-filter="search1" class="layui-btn">按照部门名称查找</button>
        <button type="submit"  lay-submit lay-filter="search2" class="layui-btn">按照所在城市查找</button>
    </div>
</form>



<table id="demo" lay-filter="test"></table>
<table id="openTable" lay-filter="openTable"></table>

<script src="layui/layui.js"></script>
<script>

    layui.use(['jquery','layer', 'form','element','table'], function() {
        var layer = layui.layer,
            element = layui.element,
            form = layui.form,
            table = layui.table,
            $ = layui.jquery;
        //var fun=
        var tableIns=table.render({
            elem:'#demo',
            /*title:'部门信息管理',*/
            url:'http://localhost:8080/depart/findAll',
            pages:false,
            cols:  [[ //标题栏
                 {field: 'id', title: '部门编号'}
                ,{field: 'name', title: '部门名称'}
                ,{field: 'city', title: '部门所在城市'}

            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": "0", //解析接口状态
                    "msg": "", //解析提示文本
                    "data": res //解析数据列表
                };
            }
        });




        //根据名称查找
        form.on('submit(search1)',function (data) {
            data=data.field;
            if(data.name==='')
            {
                layer.msg("部门名称不能为空");
                return fasle;
            }
            else{
                tableIns.reload({
                    method:'post',
                    where:{
                        name:data.name
                    }
                })
            }
            return false;
        });
        //根据城市查找
        form.on('submit(search2)',function (data) {
            data=data.field;
            if(data.city==='')
            {
                layer.msg("城市名称不能为空");
                return fasle;
            }
            else{
                tableIns.reload({
                    method:'post',
                    where:{
                        city:data.city
                    }
                })
            }
            return false;
        })
    });
</script>
</body>
</html>